<script setup>
import {onMounted, reactive} from "vue";
import axios from "axios";
import router from "@/router/index";
import {ElMessage} from "element-plus";
import {getalluser,changuserdeleted,getuserByName} from "@/http/api";



const info =reactive({
  tableData:[{
    name:'',
    uid:'',
    email:'',
    isDeleted:'',
    gender:'',
    creatTime:''
  }
  ],
  pageSize: 5,
  pageNum:1,
  total:0,
  name:'',
  status:'',
})


const name_table =JSON.parse(window.localStorage.getItem("userInfo"));

const flag =true

// 显示表单数据
onMounted(()=>{
  getall()
})

function getall() {
  getalluser({pageIndex:info.pageNum,pageSize:info.pageSize}).then((res)=>{
    info.tableData =res.data.list
    info.total=res.data.total
  })
}

//修改每页最大数
function handleSizeChange(newSize){
  info.pageSize = newSize;

 getall()
}
//跳转到第几页
function handleCurrentChange(newPage){
  info.pageNum = newPage;

  getall()
}

function getbyname(){
  getuserByName({name:info.name,pageIndex:info.pageNum,pageSize:info.pageSize}).then((res)=>{
    info.tableData =res.data.list
    info.total=res.data.total
  })
}

//名字查询
function queryname(){
  getbyname()
}


function edit(row){
  router.push({path:'/updateemployee'})
  sessionStorage.setItem("username",JSON.stringify(row.username))
}

function updateStatus(row) {
  changuserdeleted({uid:row.uid,isDeleted:row.isDeleted}).then((res)=>{
    if (res.code===10000){
      ElMessage.success("修改成功")
      getall()
    }
    else{
      ElMessage.error("修改失败")
    }
  })
}

function touser(uid){
  router.push({path:'/userinfo/'+uid})
}

</script>

<template>
  <div class="employee-main">



    <!--  搜索框-->
    <el-input
        placeholder="请输入员工姓名"
        class="username-input"
        v-model="info.name"
        prefix-icon="Search">
    </el-input>
    <!--  搜索按钮-->
    <el-button class="uaername-button" @click="queryname"><el-icon><Search/></el-icon>查询</el-button>
    <!--用户列表-->
    <div class="table">
      <el-table :data="info.tableData" style="width: 100%">
        <el-table-column prop="name" label="用户昵称" width="150" />
        <el-table-column prop="uid" label="用户id" width="200" />
        <el-table-column prop="email" label="邮箱" width="200"/>
        <el-table-column prop="gender" label="性别" width="100"/>
        <el-table-column prop="createTime" label="时间" width="200"/>
        <el-table-column  label="账号状态" width="100" >
          <template #default="scope">
            <div style="display: flex; align-items: center;">
              {{scope.row.isDeleted === 0 ? '正常' : '禁用'}}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" >
          <template #default="scope">
            <div style="display: flex; align-items: center;">
              <el-button size="small" @click="updateStatus(scope.row)" text :type="scope.row.isDeleted === 0 ? 'danger' : ''" style="width: 100px">
                {{ scope.row.isDeleted === 0 ? '禁用' : '启用' }}
              </el-button>
              <el-button text size="small" @click="touser(scope.row.uid)" type="primary" style="width: 100px;">查看</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>


      <!--    分页   size-change 每页最大变化  current-change当前最大变化   layout 功能组件   -->

      <el-pagination

          :page-sizes="[1, 5, 10, 15]"
          :page-size="info.pageSize"
          layout="total, sizes, prev, pager, next, jumper,slot"
          :total="info.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          style="margin-top: 10px"

      />
    </div>


  </div>
</template>

<style scoped>

.employee-main{
  padding-top: 20px;
}
.breadcrumb{
  margin-left: 30px;
}

.username-input {
  width: 260px;
  height: 40px;
  margin: 30px;
}
.username-input :deep(.el-input__wrapper.is-focus){
  box-shadow: 0 0 0 0.5px #ffc200;
}

.uaername-button{
  height: 40px;
  margin-bottom: 5px;
  background-color: #ffc200;
}

.uaername-button:hover{
  background-color: rgba(255, 180, 0, 0.99);
  color: #333333;
}

.uaername-button:focus{
  background-color: #ffc200;
  color: #333333;
  border-color: #ffc200;
}
.add-button{
  height: 40px;
  margin-bottom: 5px;
  background-color: #ffc200;
}

.add-button:hover{
  background-color: rgba(255, 180, 0, 0.99);
  color: #333333;
}

.add-button:focus{
  background-color: #ffc200;
  color: #333333;
  border-color: #ffc200;
}

.table{
  margin: 25px;
}

</style>